@extends('layouts.system')

@section('css')
    <style type="text/css">
        .infoItem {
            margin: 10px 0;
            line-height: 18px;
        }

        .infoItem .desc {
            width: 120px;
            font-size: 18px;
            color: #000;
        }

        .infoItem .stateValue {
            font-size: 18px;
            color: #012aff;
            text-decoration: underline;
        }

        .infoItem .value {
            font-size: 14px;
        }
    </style>
@endsection

@section('content')

    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">任务管理&#62;&#62;任务详情</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">

                        <div class="row">
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务状态</div>
                                <div class="col-sm-9 stateValue">
                                    {{$states[$details['state']]}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">创建时间</div>
                                <div class="col-sm-9 value">
                                    {{$details['created_at']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">发布时间</div>
                                <div class="col-sm-9 value">
                                    {{$details['release_time']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">截止时间</div>
                                <div class="col-sm-9 value">
                                    {{$details['deadlime']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">审核时长</div>
                                <div class="col-sm-9 value">
                                    {{$details['hours']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">发布数量</div>
                                <div class="col-sm-9 value">
                                    {{$details['number']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">已领数量</div>
                                <div class="col-sm-9 value">
                                    {{$details['used_nums']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务佣金</div>
                                <div class="col-sm-9 value">
                                    {{$details['money']}}元
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">推荐返利</div>
                                <div class="col-sm-9 value">
                                    {{$details['rebate']}}元
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务标签</div>
                                <div class="col-sm-9 value">
                                    <span>{{$labels[$details['label']]}}</span>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务标题</div>
                                <div class="col-sm-9 value">
                                    {{$details['title']}}
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务说明</div>
                                <div class="col-sm-9 value">
                                    <p>
                                        {!! $details['task_desc'] !!}
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务图例</div>
                                <div class="col-sm-9 value">
                                    <ul>
                                        @foreach($details['images_arr'] as $k => $v)
                                            <li style="float: left; margin: 10px;">
                                                <img src="{{$v}}" style="width: 70px;">
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">步骤说明</div>
                                <div class="col-sm-9 value">
                                    <p>
                                        {!! $details['step_desc'] !!}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            @if(in_array($auth['auth'],['group_a']))
                            <div style="margin: 50px 0 0 120px;">
                                @if(in_array($details['state'],['1','2']))
                                <button v-on:click="verify(3)" class="btn btn-success" style="font-size: 18px; padding: 5px; margin: 0 10px;">批准该任务</button>
                                @endif
                                @if(in_array($details['state'],['1','2','3','4']))
                                <button v-on:click="verify(2)" class="btn btn-danger" style="font-size: 18px; padding: 5px; margin: 0 10px;">否决该任务</button>
                                @endif
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">

        Vue.use(VueResource)
        var app = new Vue({
          el: '#pcont',
          data: {
          },
          methods : {
            verify : function(state){
              verifyTask(state);
            }
          }
        })
        // 审批任务
        function verifyTask(state) {
          var data = {
            state : state
          }
          app.$http.post("/admin/task/verify/{{$details['id']}}", data , {headers : header()})
            .then(function(response){
              var json = response.body;
              alert(json.msg);
              if(json.state == 1) {
                window.location.reload();
              }
            }).catch(function(response){
            console.log(response)
          })
        }

    </script>

    <script type="text/javascript">

      //      Vue.use(VueResource)
      //      var vm = new Vue({
      //        el: '#pcont',
      //        data: {
      //          current:1,
      //          total:0,
      //          type:'',
      //          keyword:'',
      //          labels: {},
      //          states: {},
      //          lists: {}
      //        },
      //        created: function () {
      //          getLists(this);
      //        },
      //        methods : {
      //          changePage: function (current) {
      //            this._data.current = current
      //            getLists(this);
      //          },
      //          search: function () {
      //            this._data.current = 1;
      //            getLists(this);
      //          },
      //          changeType: function () {
      //            this._data.keyword = ''
      //          }
      //        }
      //      })
      //
      //      function getLists(_vm) {
      //        var params = {
      //          current: _vm._data.current
      //        }
      //        var conditions = {
      //          type :  _vm._data.type,
      //          keyword :  _vm._data.keyword
      //        }
      //        params = $.extend(params, conditions)
      //        _vm.$http.get('/admin/task/getLists',{params: params})
      //          .then(function (response) {
      //            var json = response.body;
      //            console.log('json:')
      //            console.log(json)
      //            if (json.state == 1) {
      //              _vm._data.lists = json.data.lists;
      //              _vm._data.total = json.data.total;
      //              _vm._data.labels = json.data.labels;
      //              _vm._data.states = json.data.states;
      //            }
      //            console.log('data:')
      //            console.log(_vm._data)
      //
      //          })
      //          .catch(function (response) {
      //            console.log(response)
      //          })
      //      }

    </script>
@endsection